<template>
  <div class="img">
    <div style="height:1px;"></div>
    <div class="login">
      <el-form v-show="status === 0" :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px"
               class="demo-ruleForm login-container">
        <h3 class="title">学科竞赛管理系统</h3>
        <el-form-item prop="account">
          <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"
                    @keyup.enter.native="handleSubmit2"></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"
                    @keyup.enter.native="handleSubmit2"></el-input>
        </el-form-item>
        <!--    <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>-->
        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
            <p style="color: #000;">还没有账号？<el-button type="text" @click="toRegister">马上去注册</el-button> </p>
          <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
        </el-form-item>
      </el-form>


        <el-form v-show="status === 1" :model="userForm" :rules="userRules" ref="userForm" label-position="left" label-width="0px"
                 class="login-container">
            <h3 class="title">学科竞赛管理系统</h3>
            <el-form-item prop="userName">
                <el-input type="text" v-model="userForm.userName" auto-complete="off" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="userForm.password" auto-complete="off" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item prop="checkPass">
                <el-input type="password" v-model="userForm.checkPass" auto-complete="off" placeholder="确认密码"></el-input>
            </el-form-item>
            <el-form-item prop="mail">
                <el-input type="email" v-model="userForm.mail" auto-complete="off" placeholder="邮箱"></el-input>
            </el-form-item>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">注册</el-button>
                <p style="color: #000;">已有账号？<el-button type="text" @click="toLogin">马上登录</el-button> </p>
            </el-form-item>
        </el-form>
      <!--<header>
        <h1>学科竞赛管理系统</h1>
      </header>
      <div class="sr">
        <form>
          <div class="name el-icon-user-solid">
            <input type="text"  placeholder="用户名" class=" el-icon-user-solid">
          </div>
          <div class="name">
            <input type="password"  placeholder="密码" class="name_inp">
          </div>
          <button class="dl">登录</button>
        </form>
      </div>-->
    </div>

  </div>
</template>

<script>

  export default {
    created() {
      var _this = this;
      // 回车键监听
      document.onkeydown = function(e) {
        var key = window.event.keyCode;
        if (key == 13) {
          _this.handleSubmit2();
        }
      }
    },
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.userForm.checkPass !== '') {
                    this.$refs.userForm.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.userForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };

      return {
        status:0,   //  0 登录 1 注册
        logining: false,
          userForm: {
              userName: "",
              password: "",
              checkPass:"",
              mail:"",
          },
          userRules: {
              userName: [
                  { required: true, message: '请输入用户名', trigger: 'blur' },
              ],
              password: [
                  { validator: validatePass, trigger: 'blur' },
              ],
              checkPass: [
                  {validator: validatePass2, trigger: 'blur' },
              ],
              mail: [
                  { required: true, message: '请输入邮箱', trigger: 'blur' },
                  { type: 'email', message: '请输入正确的邮箱', trigger: ['blur', 'change'] }
              ]
          },
        ruleForm2: {
          account: '',
          checkPass: ''
          // account: 'teacher',
          // checkPass: '123456'
        },
        rules2: {
          account: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            //{ validator: validaePass }
          ],
          checkPass: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            //{ validator: validaePass2 }
          ]
        },
        checked: true
      };
    },
    methods: {
      handleReset2() {
        this.$refs.ruleForm2.resetFields();
      },
      handleSubmit2(ev) {
          if(this.status === 0){
              this.login()
          }else if (this.status === 1){
              this.register()
          }
      },

    // 登录
    login(){

        let _this = this;
        this.$refs.ruleForm2.validate((valid) => {
            if (valid) {
                _this.logining = true;
                let loginParams = { userName: this.ruleForm2.account, password: this.ruleForm2.checkPass };
                this.http({
                    method:"post",
                    url:"user/login",
                    data:loginParams,
                })
                .then(function(response){
                    _this.logining = false;
                    if(response.data.code === 666){
                        localStorage.JWT_TOKEN = response.data.data.token

                        let uType = response.data.data.uType;
                        if (uType === "3"){
                            localStorage.setItem("teacherId", response.data.data.teacherId)
                        }
                        _this.$store.dispatch("accountRole", uType);

                        _this.$router.push('/echarts' );
                    }else {
                        _this.$message.error(response.data.message);
                    }
                })
                .catch(function(response){
                    _this.logining = false
                    // Message.error("登录失败，可能是服务器连接超时")
                    _this.$message.error("登录失败，可能是服务器连接超时");
                })

            } else {
                console.log('error submit!!');
                return false;
            }
        });
    },

    // 注册
    register() {
        let _this = this;
        this.$refs.userForm.validate((valid) => {
            if (valid) {
                _this.logining = true;
                this.http({
                    method: "post",
                    url: "user/add",
                    data: this.userForm,
                })
                .then(function (response) {
                    _this.logining = false;
                    if (response.data.code === 666) {
                        localStorage.JWT_TOKEN = response.data.data.token

                        _this.$message.success("注册成功！欢迎使用")
                    } else {
                        _this.$message.error(response.data.message);
                    }
                    _this.logining = false
                })
                .catch(function (response) {
                    _this.logining = false;
                    _this.$message.error("注册失败，可能是服务器连接超时");
                })

            } else {
                console.log('error submit!!');
                return false;
            }
        })
    },

    // 显示登录界面
    toLogin(){
      this.status = 0;
    },

    // 显示注册界面
    toRegister(){
        this.status = 1;
        // this.$router.push('/register').catch(err => {
        //     console.log("error-->", err)
        // })
    }

    }
  }

</script>

<style scoped>

  @import "../../static/css/bootstrap.min.css";
  @import "../../static/css/login.css";

  .img{
    background: url('../../static/images/logo_bg.jpg') left center no-repeat;
    position:fixed;
    background-position:center top;
    background-size: 100% 100%;
    width:100%;
    height:100%;
    perspective:500px;;
  }
  .login-container {
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  register-container {
      /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
      -webkit-border-radius: 5px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      background-clip: padding-box;
      margin: 180px auto;
      width: 350px;
      padding: 35px 35px 15px 35px;
      background: #fff;
      border: 1px solid #eaeaea;
      box-shadow: 0 0 25px #cac6c6;
  }


  .title {
      margin: 0px auto 40px auto;
      text-align: center;
      color: #505458;
  }
  .remember {
      margin: 0px 0px 35px 0px;
  }

  .ur{
    height:37px;
    border:0;
    color:#666;
    width:236px;
    margin:4px 28px;
    background:url('../../static/images/user.png') no-repeat;
    padding-left:10px;
    font-size:16pt;
    font-family:Arial, Helvetica, sans-serif;
  }
  .pw{
    height:37px;
    border:0;
    color:#666;
    width:236px;
    margin:4px 28px;
    background:url('../../static/images/password.png') no-repeat;
    padding-left:10px;
    font-size:16pt;
    font-family:Arial, Helvetica, sans-serif;
  }
</style>
